
/**
 * 省市级联
 * selectpicker（使用三方插件）
 */
class AreaSelected {
    /**
     *
     * @param {Object} options           图表参数
     * @param {String} options.selector  DOM
     * @param {String} options.url       接口地址
     * @param {String} options.params    接口参数
     */
    constructor(options) {
        this.options = $.extend({}, options);
        this.$dom = this.options.selector
    }

    /**
     * 初始化
     */
    init() {
        // 初始下拉框dom
        $(this.options.selector).prepend(this.render())
        // 初始化省级数据
        this.getData({val:'-1'},'')
        // 初始样式
        $(this.$dom + ' .selectpicker').selectpicker('refresh');
        // 监听省份的回调
        $(this.$dom + ' #province.selectpicker').on('changed.bs.select', e => {
            let value = e.currentTarget.value
            this.getData({val:value},'province')
        });
        // 监听城市的回调
        $(this.$dom + ' #city.selectpicker').on('changed.bs.select', e => {
            let value = e.currentTarget.value
            this.getData({val:value},'city')
        });
    }

    /**
     * 初始下拉框
     * @returns {string}
     */
    render () {
        return `
                 <div class="form-group">
                   <label class="col-sm-3 control-label">省：</label>
                   <div class="col-sm-9">
                       <select class="selectpicker form-control" id="province" name="province"><option value="">请选择</option></select>
                   </div>
                 </div>
                 <div class="form-group">
                   <label class="col-sm-3 control-label">市：</label>
                   <div class="col-sm-9">
                       <select class="selectpicker form-control" id="city" name="city"><option value="">请选择</option></select>
                   </div>
                 </div>
                 <div class="form-group">
                   <label class="col-sm-3 control-label">县：</label>
                   <div class="col-sm-9">
                       <select class="selectpicker form-control" id="county" name="county"><option value="">请选择</option></select>
                   </div>
                 </div>`
    }

    /**
     * 获取下拉框数据
     * @param {Object} data  接口参数
     * @param {String} dom   值发生改变的下拉框
     */
    getData (data,dom) {
        let node;
        if(dom === 'province'){
            $(this.$dom + ' #city').html('<option value="">请选择</option>')
            $(this.$dom + ' #county').html('<option value="">请选择</option>')
            node = this.$dom + ' #city'
        }else if(dom === 'city'){
            $(this.$dom + ' #county').html('<option value="">请选择</option>')
            node = this.$dom + ' #county'
        }else {
            node = this.$dom + ' #province'
        }
        $(this.$dom + ' .selectpicker').selectpicker('refresh');
        if(data.val){
            wdAjax.get({
                url: this.options.url,
                cache: false, //禁用缓存
                data: $.extend({},data,this.options.params), //传入已封装的参数
                success: result => {
                    this.htmlInit(result,node)
                    $(node).selectpicker('refresh');
                }
            })
        }
    }

    /**
     * 追加下拉框选项
     * @param {Object} data   接口返回数据
     * @param {String} dom    赋值的下拉框
     */
    htmlInit (data,dom) {
        data.forEach( item =>{
            $(dom).append('<option value="'+item.id+'">'+item.name+'</option>')
        })
    }
}